<template>
	<view class="page_bg">
		<view class="psw_bg">
			<u-input v-model="oldPsw" type="password" :border="false" placeholder="请输入原密码" password-icon />
		</view>
		<view class="psw_bg">
			<u-input v-model="newPsw" type="password" :border="false" placeholder="请输入新密码" password-icon />
		</view>
		<view class="psw_bg">
			<u-input v-model="pswAgain" type="password" :border="false" placeholder="请再次输入新密码" password-icon />
		</view>
		<u-toast ref="uToast" />

		<u-button class="save_btn" shape="circle" :ripple="true" ripple-bg-color="#444" @tap="changePsw">保存</u-button>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				oldPsw: '',
				newPsw: '',
				pswAgain: ''
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {},
			// 修改密码
			changePsw() {
				if (that.oldPsw == '' || that.newPsw == '' || that.pswAgain == '') {
					this.$refs.uToast.show({
						title: '请输入密码',
						type: 'warning',
					})
					return
				}
				if (that.oldPsw == that.newPsw) {
					this.$refs.uToast.show({
						title: '新密码请勿与原密码一致',
						type: 'warning',
					})
					return
				}
				if (that.newPsw != that.pswAgain) {
					this.$refs.uToast.show({
						title: '重复密码与新密码不一致',
						type: 'warning',
					})
					return
				}

				vk.userCenter.updatePwd({
					data: {
						oldPassword: that.oldPsw,
						newPassword: that.newPsw,
						password_confirmation: that.pswAgain
					},
					success: function(data) {
						// 修改成功后的逻辑
						vk.switchTab('/pages/mine/index');
					}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		height: 100vh;
		background: #F5F5F5;
		padding-top: 20rpx;

		.psw_bg {
			background: #FFFFFF;
			margin-bottom: 2rpx;
			padding: 20rpx;
		}
	}

	.save_btn {
		background-color: #333333;
		color: #FFFFFF;
		margin: 192rpx 30rpx 0;
	}
</style>
